<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物商城首页</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
</head>
<body>
<div class="container-fluid nav_top">
    <div class="navbar-header">
        <a class="navbar-brand" th:href="@{/}">淘淘商城</a>
    </div>
    <div>
        <ul class="nav navbar-nav navbar-right">
            <li class="active" th:if="${session.user}==null"><a th:href="@{/login}">亲，请登录</a></li>
            <li class="dropdown" th:unless="${session.user}==null">
                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false" href="#">
                    <span th:text="'欢迎您:' + ${session.user.username} + '!'"></span><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a th:href="@{/user/logout}">退出</a></li>
                </ul>
            </li>
            <li>
                <a th:href="@{/user/cartList}">购物车</a>
            </li>
            <li>
                <a th:href="@{/user/order}">我的订单</a>
            </li>
        </ul>
    </div>
</div>
<!-- 头部 -->
<div class="header">
    <div class="wrap">
        <a class=" header-logo" th:href="@{/}">
            <img src="../static/image/logo.png" th:src="@{/image/logo.png}" alt="在线商城"></a>
        <div class="header-search">
            <form th:action="@{/search}" method="post">
                <input type="text" name="product" class="header-search-text">
                <input class="header-search-btn" type="submit" value="搜索">
            </form>
            <p class="header-search-hot">热门搜索：新款连衣裙 四件套 潮流T恤 时尚女鞋 短裤 半身裙 </p>
        </div>
        <div class="header-info">
            <a href="#">会员中心</a>
            <a th:href="@{/user/cartList}">去购物车结算</a>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="text-center min-title"><h3>商品分类</h3></div>
            <a th:href="@{/type/{id}(id=${type.id})}" th:each="type:${type}">
                <span th:text="${type.typeName}"></span>&nbsp;/
            </a>
        </div>
        <div class="col-md-6">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="https://xiaoxu-blog.oss-cn-hangzhou.aliyuncs.com/EC/lubanimage1.jpg"
                             alt="First slide">
                    </div>
                    <div class="item">
                        <img src="https://xiaoxu-blog.oss-cn-hangzhou.aliyuncs.com/EC/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"
                             alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="https://xiaoxu-blog.oss-cn-hangzhou.aliyuncs.com/EC/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"
                             alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center min-title"><h3>商城公告</h3></div>
            <div class="list-group">
                <a th:href="@{/notice/{id}(id=${notice.id})}" class="list-group-item" th:each="notice:${notice}"><span
                        th:text="${notice.title}">Dapibus ac facilisis in</span></a>
            </div>
        </div>
    </div>
    <!--相关推荐-->
    <div class="row">
        <div class="col-lg-12">
            <div class="heading">
                <h2>相关推荐</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="products">
                <div class="col-lg-3 col-md-2 col-xs-12" th:each="product:${products}">
                    <div class="product" style="border: 1px solid gainsboro;">
                        <div class="image">
                            <a th:href="@{/product/{id}(id=${product.id})}"><img th:src="@{${product.imageUrl}}"
                                                                                 class="center-block"
                                                                                 style="width: 230px;height: 200px;"/></a>
                        </div>
                        <p style="margin-left: 5px; margin-top: 5px;"><span th:text="${product.name}">【订金预订省50】HUAWEI nova 6</span>
                        </p>
                        <p style="color: red; margin-left: 5px;"><span th:text="'￥'+${product.nowPrice}">3799.00</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>